import React, { Component } from 'react';
import { NavBar } from 'antd-mobile';
import { DeleteOutline } from 'antd-mobile-icons'
import { request_add_searchkey } from '../store/actionCreator'
import { debounce } from '../utils/tools'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

class Search extends Component {
    state = {
        historylist: ['雅诗兰黛', '兰蔻', '黛珂', '娇韵诗', '面霜', '科颜氏', '眼霜', '香水', '面膜', '资生堂'],
        searchkey: '',
        isshow: false
    }
    componentDidMount() {
        this.newhandlechange = debounce(this.handlechange.bind(this), 1000)
    }
    handlechange(e) {
        this.setState({
            searchkey: e.target.value
        }, () => {
            this.props.search_list(this.state.searchkey)
            this.setState({
                isshow: true,
            })
        })

    }
    del_val() {
        var Ipt = document.getElementsByName('searchkey');
        Ipt[0].value = '';
        this.setState({
            searchkey: ''
        })
    }
    render() {

        return (
            <div className='searchme'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}>搜索商品</NavBar>
                </div>
                <div className='search'>
                    <input type="text" placeholder='搜索店铺内商品' name='searchkey' defaultValue={this.state.searchkey} onChange={(e) => { this.newhandlechange(e) }} />
                    <span onClick={() => { this.del_val() }}>取消</span>
                    <div className='search_list' style={{ display: this.state.isshow ? 'block' : 'none' }}>
                        {
                            this.props.searchkeylist.map((item, index) => {
                                return (
                                    <p key={index} onClick={() => { this.props.history.push({ pathname: '/detail', state: { id: item.id } }) }}>{item.name}</p>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="currentsearch">
                    <div className="currentsearch_t">
                        <span>最近搜索</span>
                        <DeleteOutline fontSize={20} color='#999' />
                    </div>
                    <div className="list">
                        {
                            this.props.searchlist.map((item, index) => {
                                return (
                                    <p key={index}>{item}</p>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="historysearch">
                    <div className="historysearch_t">
                        <span>热门搜索</span>
                        <DeleteOutline fontSize={20} color='#999' />
                    </div>
                    <div className="list">
                        {
                            this.state.historylist.map((item, index) => {
                                return (
                                    <p key={index}>{item}</p>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default connect(
    (state) => {
        return {
            'searchlist': state.searchlist,
            'searchkeylist': state.searchkeylist
        }
    },
    (dispatch) => {
        return {
            search_list(params) {
                dispatch(request_add_searchkey(params))
            }
        }
    }
)(withRouter(Search));